
<template>
    <div class="all">
        <div class="tttlll">工作录入</div>
        <div class="container10">
            <el-container class="yg">
                <el-main>
                    <div class="title36">
                        &nbsp;&nbsp; &nbsp; 员工信息录入
                    </div>
                    <div class="kkbb"></div>

                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="员工工号" id="qian">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="员工名字">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>

                        <el-form-item label="员工性别">
                            <el-select v-model="form.sex" placeholder="请选择">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="员工权力">
                            <el-select v-model="form.roles" placeholder="请选择">
                                <el-option label="管理员" value="0"></el-option>
                                <el-option label="员工" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="bt">
                            <el-button type="primary" @click="createPerson()">立即创建</el-button>
                            <el-button @click="clean()">取消</el-button>
                        </el-form-item>
                    </el-form>

                </el-main>
            </el-container>
            <div class="kb"></div>
            <el-container class="qx">
                <el-main>
                    <el-form ref="form" :model="shortage" label-width="80px">
                        <div class="title36">
                            &nbsp;&nbsp;&nbsp; 重大缺陷录入
                        </div>
                        <div class="kkbb"></div>
                        <el-form-item label="缺陷分类">
                            <el-input v-model="shortage.shortage"></el-input>
                        </el-form-item>
                        <el-form-item class="bt">
                            <el-button type="primary" @click="createShortage()">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>

                </el-main>
            </el-container>
            <div class="kb"></div>
            <el-container class="jz">
                <el-aside width="100%">
                    <div class="title36">
                        &nbsp;&nbsp;&nbsp; 机组信息录入
                    </div>
                    <div class="kkbb"></div>
                    <el-form ref="form" :model="machine" label-width="80px">
                        <el-form-item label="机组编号">
                            <el-input v-model="machine.machine"></el-input>
                        </el-form-item>
                        <el-form-item class="bt">
                            <el-button type="primary" @click="createMachine()">立即创建</el-button>
                            <el-button @click="clean()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-aside>
            </el-container>
        </div>
    </div>
</template>







<script>
import { createPerson, createShortage, createMachine } from '@/api/table';


export default {
    data() {
        return {
            form: {
                username: '',
                name: '',
                roles: '',
                password: '1234567890',
                sex: '',
            },

            shortage: {
                shortage: '',
            },

            machine: {
                machine: '',
            }
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },

        createPerson() {
            console.log(this.form);
            createPerson(this.form).then(response => {
                this.clean();
                this.$message({
                    message: '人员数据录入成功！',
                    type: 'success'
                });
            })
        },

        createShortage() {
            createShortage(this.shortage).then(response => {

                this.$message({
                    message: '重大缺陷录入成功！',
                    type: 'success'
                });
            })

        },

        createMachine() {

            createMachine(this.machine).then(response => {
                this.$message({
                    message: '机组信息录入成功！',
                    type: 'success'
                });
            })
        },

        clean() {
            this.form.username = '';
            this.form.name = '';
            this.form.roles = '';
            this.form.sex = '';
        },

        clean2() {
            this.shortage.shortage = '';
        },
    }
}
</script>







<style  scoped>
.bt {
    text-align: center;
}

.tttlll {
    text-align: center;
    color: rgb(80, 80, 80);
    font-weight: bolder;
    font-size: 300%;
    font-family: "KaiTi";
    border-bottom: 1px solid rgb(80, 80, 80);
}

.all {
    background-color: rgb(241, 243, 243);
    min-height: 94.8vh;
    padding-top: 1%;
}

.kb {
    padding-top: 10px;
    background-color: rgb(241, 243, 243);
}



.container10 {
    width: 68%;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 8px #888888;
    margin-left: 17%;
    margin-top: 2%;
    min-height: 100%;
}


.el-form-item__label {
    font-size: 17px;
}

.kkbb {
    padding-top: 15px;

}

.jz {
    margin-left: 2.1%;
}

.title36 {

    text-align: left;
    color: rgb(80, 80, 80);
    font-weight: bolder;
    font-size: 200%;
    font-family: "KaiTi";
    border-bottom: 1px solid rgb(80, 80, 80);
}
</style>